<template>
  <div class="order-detail-container">
    <div class="camera-title">
      <div class="icon">
        <IconFont
          font-class-name="iconfont"
          class-prefix="icon"
          name="tuikuan"
        />
      </div>
      <div class="camera-right">
        <div
          class="camera-right-status"
          v-if="objectDetail?.orderProgress == 0"
        >
          <div>待支付</div>
          <div class="camera-right-time">
            <nut-countdown
              :startTime="new Date().getTime()"
              :endTime="
                new Date(objectDetail?.createTime).getTime() + 5 * 60 * 1000
              "
              @on-end="TimerOver(objectDetail)"
            ></nut-countdown>
          </div>
        </div>
        <div
          class="camera-right-status"
          v-if="objectDetail?.orderProgress == 3"
        >
          已出票
        </div>
        <div
          class="camera-right-status"
          v-if="objectDetail?.orderProgress == 1"
        >
          已支付
        </div>
        <div
          class="camera-right-status"
          v-if="objectDetail?.orderProgress == -1"
        >
          已超时
        </div>
        <div
          class="camera-right-status"
          v-if="objectDetail?.orderProgress == -2"
        >
          出票失败
        </div>
        <div
          class="camera-right-status"
          v-if="objectDetail?.orderProgress == 4"
        >
          已完成
        </div>
      </div>
    </div>
    <div class="camera-box">
      <div class="camera-box-detail">
        <div class="camera-box-detail-row1">
          <div class="camera-box-detail-row1-right">
            <image
              class="img"
              style="width: 90px; border-radius: 3px"
              mode="widthFix"
              :src="objectDetail?.moviePoster"
            />
          </div>
          <div class="camera-box-detail-row1-left">
            <div class="camera-box-detail-row1-left-name">
              {{ objectDetail?.movieName }}
            </div>
            <div class="camera-box-detail-row1-left-type">
              {{ objectDetail?.scheduleDesc }} {{ objectDetail?.ticketNum }} 张
            </div>
            <div class="camera-box-detail-row1-left-time">
              <div class="camera-box-detail-row1-left-time1">
                {{ formatShowTimeYear(objectDetail?.startTime) }}
              </div>
              <div class="camera-box-detail-row1-left-time2">
                {{ formatShowTime(objectDetail?.startTime) }} 开场
              </div>
            </div>
            <div class="camera-box-detail-row1-left-address">
              {{ objectDetail?.cinemaAddres }}
            </div>
            <div class="camera-box-detail-row1-left-position-Name">
              {{ objectDetail?.hallName }}
            </div>
            <div class="camera-box-detail-row1-left-position">
              <div class="camera-box-detail-row1-left-position-seat">
                <div
                  class="camera-box-detail-row1-left-position-seat-item"
                  v-for="item in objectDetail?.seatData"
                  :key="item"
                >
                  <template v-if="item?.edit_position_seat">
                    {{ item?.edit_position_seat }}
                  </template>
                  <template v-else>
                    {{ item?.seatNo }}
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="camera-box-vote">
      <view
        class="demo-box"
        v-if="
          objectDetail?.orderProgress == 3 || objectDetail?.orderProgress == 4
        "
      >
        <div class="camera-box-vote-item-row1">
          <div class="camera-box-vote-item-row1-title">任意取票机均可取票</div>
          <div
            class="camera-box-vote-item-row1-rightTitle"
            @click="handleClickNone()"
          >
            无法正常取票,点这里
            <span class="iconfont icon-sanjiantou rightSanjiantou"></span>
          </div>
        </div>
        <nut-swiper :init-page="page" ref="swiper" v-if="voteList.length">
          <nut-swiper-item
            v-if="voteList.length"
            v-for="(item, index) in voteList"
            :key="item.id"
          >
            <canvas
              style="width: 130px; height: 130px"
              :canvas-id="`myQrcode${item.id}`"
            ></canvas>
            <div class="image-hidden" v-if="objectDetail?.orderProgress == 4">
              <div class="biaoshi">
                <image
                  style="width: 80px"
                  src="../../assets/images/myImg/label.png"
                  mode="widthFix"
                ></image>
              </div>
            </div>
            <div class="page">
              {{ index + 1 }} / {{ objectDetail?.ticketNum }}
            </div>
            <div
              class="nut-swiper-item-text"
              :class="{ 'text-trough': objectDetail?.orderProgress == 4 }"
            >
              <span style="margin-left: 5px">{{ item.textData }}</span>
            </div>
          </nut-swiper-item>
        </nut-swiper>
        <view class="nut-swiper-btns">
          <span class="nut-swiper-btns__left" @click="handlePrev">
            <Left></Left>
          </span>
          <span class="nut-swiper-btns__left" @click="handleNext">
            <Right></Right>
          </span>
        </view>
      </view>

      <div class="vote-wait" v-if="objectDetail?.orderProgress == 1">
        <div class="vote-wait-icon">
          <image
            src="../../assets/images/myImg/wait.png"
            style="width: 100px"
            mode="widthFix"
          ></image>
        </div>
        <div class="vote-wait-title">正在出票,预计5-40分钟</div>
        <div class="vote-wait-comment">
          您可以退出此页面,可以下拉进行刷新,或者在订单页面重新进入当前页面，超时未出票请联系客服查询
        </div>
      </div>
      <div class="vote-error" v-if="objectDetail?.orderProgress == -2">
        <div class="vote-error-icon">
          <image
            src="../../assets/images/myImg/err.png"
            style="width: 100px"
            mode="widthFix"
          ></image>
        </div>
        <div class="vote-error-title">退票原因</div>
        <div class="vote-error-comment">
          亲！该影院网络售票系统出现故障,请更换万达CGV大地Ume卢米埃等连锁影城,重新购票
        </div>
      </div>
      <div class="vote-close" v-if="objectDetail?.orderProgress == -1">
        <div class="vote-close-title">已经超时</div>
        <div class="vote-close-content">超时未付款,自动关闭订单</div>
      </div>
      <div class="vote-close" v-if="objectDetail?.orderProgress == 0">
        <div class="vote-close-title">等待支付</div>
        <div class="vote-close-content">超时未付款,自动关闭订单</div>
      </div>
    </div>

    <div class="camera-order">
      <div class="camera-order-number common">
        <div class="camera-order-number-left">订单号</div>
        <div class="camera-order-number-right">
          <div class="camera-order-number-right-orderNumber">
            {{ objectDetail?.orderNo }}
          </div>
          <div
            class="camera-order-number-right-btn"
            @click="copy(objectDetail.orderNo)"
          >
            复制
          </div>
        </div>
      </div>

      <div class="camera-order-time common">
        <div class="camera-order-time-left">下单时间</div>
        <div class="camera-order-time-right">
          {{ objectDetail?.createTime }}
        </div>
      </div>

      <div class="camera-order-num common">
        <div class="camera-order-num-left">数量</div>
        <div class="camera-order-num-right">{{ objectDetail?.ticketNum }}</div>
      </div>
      <div class="camera-order-yuanjia common">
        <div class="camera-order-num-left">原价</div>
        <div class="camera-order-num-right">
          ￥{{
            objectDetail?.originalPrice
          }}
        </div>
      </div>
      <div class="camera-order-zhekoujia common">
        <div class="camera-order-num-left">付款金额</div>
        <div class="camera-order-num-right" v-if="objectDetail?.isQuick == 0">
          ￥{{
            objectDetail?.normalPayAmount
          }}
        </div>
        <div class="camera-order-num-right" v-if="objectDetail?.isQuick == 1">
          ￥{{
            objectDetail?.quickPayAmount
          }}
        </div>
      </div>
    </div>

    <div style="height: 100px"></div>
  </div>
  <Footer></Footer>
</template>
<script setup>
// 0 待支付订单  3 已出票订单  4  完成订单 -1 超时顶单 -2 失败订单
import Taro, { usePullDownRefresh } from "@tarojs/taro";
import {
  ref,
  onMounted,
  computed,
  Ref,
  reactive,
  nextTick,
  getCurrentInstance,
  onUnmounted,
} from "vue";
// import QrcodeVue from "qrcode.vue";

import drawQrcode from "weapp-qrcode";
import * as orderApi from "../../api/order";
import Footer from "./footer.vue";
import { IconFont } from "@nutui/icons-vue-taro";
import { Left, Right } from "@nutui/icons-vue-taro";
import moment from "moment";
const router = Taro.useRouter();
const timer = ref(0);
const status = ref(2);
const isFinish = ref(1);
const qrPath = ref("");
var swiperSelected = ref(0);
const { proxy } = getCurrentInstance();
const codeList = ref([
  { id: 1, code: "../../assets/images/myImg/Qr_code.png", pass: "1" },
  { id: 2, code: "../../assets/images/myImg/Qr_code.png", pass: "2" },
  { id: 3, code: "../../assets/images/myImg/Qr_code.png", pass: "3" },
]);
const timerInter = ref(null);
const formatShowTimeYear = computed(() => {
  return (str) => {
    return moment(str).format("YYYY-MM-DD");
  };
});

const formatQrCode = computed(() => {
  return (str) => {
    return moment(str).format("YYYY-MM-DD");
  };
});
// 【格式化】开场时间
const formatShowTime = computed(() => {
  return (str) => {
    return moment(str).format("HH:mm");
  };
});
usePullDownRefresh(() => {
  Taro.showNavigationBarLoading();
  console.log("onPullDownRefresh");
  setTimeout(() => {
    getDetail({
      id: paramsId.value,
    });
  }, 400);
});
const handleClickNone = () => {
  // console.log(item, "打印一下当前的数据");
  Taro.navigateTo({
    url: `/pages/originVote/index?list=${JSON.stringify(voteList.value)}`,
  });
};
const swiper = ref(null);
const page = ref(0);
const handlePrev = () => {
  swiper.value.prev();
  console.log(swiper.value);
  swiperSelected.value = swiper.value.activePagination;
  page.value = swiper.value.activePagination;
};
const voteList = ref([]);
const handleNext = () => {
  swiper.value.next();
  console.log(swiper.value, "==========");
  swiperSelected.value = swiper.value.activePagination;
  page.value = swiper.value.activePagination;
};
const paramsId = ref(0);
const objectDetail = ref({});
const obj = reactive({});
const TimerFlag = ref(false);
onMounted(() => {
  Taro.showLoading({
    title: "加载中",
    mask: true,
  });
  console.log(router.params);
  paramsId.value = router.params.orderId;
  getDetail({
    id: router.params.orderId,
  });
  timerInter.value = setInterval(() => {
    getDetail({
      id: router.params.orderId,
    });
  }, 30000);
});
onUnmounted(() => {
  clearInterval(timerInter.value);
  timerInter.value = null;
});
const getVoteDetail = async () => {
  const data = {
    orderId: objectDetail.value.orderNo,
  };
  const res = await orderApi.getVoteDetail(data);
  console.log(res, "dayin yixia vote");
  if (res.length) {
    res.forEach((element) => {
      let qrCodeData = "";
      let textData = "";
      if (element.oldTextInfo) {
        if (element.oldTextYcode) {
          qrCodeData = element.oldTextInfo + "|" + element.oldTextYcode;
          textData =
            "序列号:" +
            element.oldTextInfo +
            "\u0020" +
            "\u0020" +
            "验证码:" +
            element.oldTextYcode;
        } else {
          qrCodeData = element.oldTextInfo;
          textData = "序列号:" + element.oldTextInfo;
        }
      } else if (element.textInfo) {
        if (element.oldTextYcode) {
          textData =
            "取票码:" +
            element.textInfo +
            "\u0020" +
            "\u0020" +
            "\u0020" +
            "验证码:" +
            element.oldTextYcode;
          qrCodeData = element.textInfo + "|" + element.oldTextYcode;
        } else {
          textData = "取票码:" + element.textInfo;

          qrCodeData = element.textInfo;
        }
      } else {
        qrCodeData = "";
        textData = "";
      }
      element.qrCodeData = qrCodeData;
      element.textData = textData;

      setTimeout(() => {
        drawQrcode({
          width: 130,
          height: 130,
          canvasId: `myQrcode${element.id}`,
          text: element.qrCodeData,
        });
      }, 100);
    });
    voteList.value = res;
  }

  Taro.stopPullDownRefresh();
  Taro.hideNavigationBarLoading();
};
const TimerOver = (e) => {
  console.log("时间结束");
  console.log(e, "----------------");
  e.orderProgress = -1;
};
const getDetail = async (data) => {
  const res = await orderApi.OrderDetail(data);
  objectDetail.value = res;
  Taro.hideLoading();
  TimerFlag.value = true;
  getVoteDetail();
};
const copy = (order) => {
  Taro.setClipboardData({
    data: order, //要被复制的内容
    success: () => {
      //复制成功的回调函数
      Taro.showToast({
        //提示
        title: "复制成功",
        icon: "none",
      });
    },
  });
};
</script>
<style lang="scss">
.order-detail-container {
  padding: 20px 25px;
  box-sizing: border-box;
  .camera-title {
    display: flex;
    // justify-content: center;
    align-items: center;
    font-size: 30px;
    background-color: #fff;
    padding: 30px;
    border-bottom: 1px solid #eee;
    color: #15181d;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to right, #ff6034, #ee0a24);
      height: 50px;
      width: 50px;
      border-radius: 50px;
      // margin-right: 15px;
      .iconfont {
        font-size: 24px;
        color: #ffffff;
      }
    }
    .camera-right {
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: flex-start;
      margin-left: 20px;
      .camera-right-time {
        color: #858a99;
        font-size: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
        .nut-countdown__content {
          color: #ee0a24 !important;
          font-size: 24px;
          font-weight: normal;
        }
      }
      .camera-right-status {
        color: #15181d;
        font-weight: 700;
        font-size: 30px;
      }
    }
    .camera-title-jt {
      font-size: 40px;
      font-weight: 700;
    }
  }
  .camera-box {
    background-color: #fff;
    // border-radius: 30px;
    padding: 50px 30px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    box-sizing: border-box;
    .camera-box-detail {
      font-size: 30px;
      .camera-box-detail-row1 {
        display: flex;
        justify-content: flex-start;
        // align-items: center;
        .camera-box-detail-row1-left {
          font-size: 24px;
          margin-left: 20px;
          .camera-box-detail-row1-left-name {
            color: #15181d;
            font-size: 32px;
            font-weight: 700;
            // margin-top: 10px;
          }
          .camera-box-detail-row1-left-time {
            color: #858a99;
            margin-top: 10px;
            display: flex;
            align-items: center;
            .camera-box-detail-row1-left-time1 {
            }
            .camera-box-detail-row1-left-time2 {
              color: #ee0a24;
              font-size: 24px;
              margin-left: 8px;
            }
          }
          .camera-box-detail-row1-left-position-Name {
            color: #858a99;
            margin-top: 10px;

            display: -webkit-box;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .camera-box-detail-row1-left-address {
            color: #858a99;
            margin-top: 10px;

            display: -webkit-box;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .camera-box-detail-row1-left-position {
            margin-top: 10px;
            display: -webkit-box;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;

            color: #858a99;

            .camera-box-detail-row1-left-position-seat {
              display: flex;
              flex-wrap: wrap;
              .camera-box-detail-row1-left-position-seat-item:nth-child(n + 2) {
                margin-left: 5px;
              }
            }
          }
          .camera-box-detail-row1-left-type {
            color: #858a99;
            margin-top: 10px;
            font-size: 24px;
          }
        }
      }
      .camera-box-detail-row2 {
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .camera-box-detail-row2-left {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ee0a24;
          font-weight: 700;
          font-size: 28px;
          .sanjiantouFont {
            font-size: 42px;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .camera-box-vote {
    margin-top: 25px;
    border-radius: 20px;
    padding: 25px;

    background-color: #fff;

    .demo-box {
      position: relative;
      .camera-box-vote-item-row1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .camera-box-vote-item-row1-title {
          color: #858a99;
          font-size: 24px;
        }
        .camera-box-vote-item-row1-rightTitle {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: #ee0a24;
        }
        .rightSanjiantou {
          font-size: 38px;
          color: #ee0a24;
        }
      }
    }
    .nut-swiper {
      margin-top: 50px;
      position: relative;
      .page {
        position: absolute;
        bottom: 12%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 18px;
        background-color: #eee;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 15px;
      }
      .image-hidden {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        background: rgba(255, 255, 255, 0.7);
        width: 360px;
        height: 360px;
        // background-color: pink;
        .biaoshi {
          position: absolute;
          right: 10%;
          bottom: 25%;
          z-index: 99;
        }
      }
    }
    .nut-swiper-item {
      // line-height: 150px;
      width: 360px;
      height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .text-trough {
        text-decoration: line-through;
      }
      .nut-swiper-item-text {
        color: #858a99;
        font-size: 24px;
        margin-top: 20px;
        display: flex;
        align-items: center;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .nut-swiper-btns {
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      display: flex;
      justify-content: space-between;
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        color: #858a99;
        // background-color: rgba(0, 0, 0, 0.2);
      }
    }

    .vote-succes {
      display: flex;
      flex-direction: column;
      .vote-succes-item:last-child {
        border-bottom: 0;
      }
      .vote-succes-item {
        // background-color: pink;
        padding: 5px 0 25px;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        .camera-box-vote-item-row1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .camera-box-vote-item-row1-title {
            color: #858a99;
            font-size: 24px;
          }
          .camera-box-vote-item-row1-rightTitle {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #ee0a24;
          }
          .rightSanjiantou {
            font-size: 38px;
            color: #ee0a24;
          }
        }
        .camera-box-vote-item-row2 {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .camera-box-vote-item-row2-qrCode {
            width: 300px;
            height: 300px;
            margin-top: 20px;
          }
          .camera-box-vote-item-row2-text {
            font-size: 24px;
            color: #858a99;
            margin-top: 15px;
          }
        }
      }
      .vote-succes-item:nth-child(n + 2) {
        margin-top: 20px;
      }
    }

    .vote-wait {
      display: flex;
      flex-direction: column;
      .vote-wait-icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .vote-wait-title {
        color: #dd9654;
        text-align: center;
        font-size: 28px;
        margin-top: 25px;
        font-weight: 700;
      }
      .vote-wait-comment {
        font-size: 24px;
        margin-top: 20px;
        color: #858a99;
        text-align: center;
        padding: 0 50px;
      }
    }
    .vote-error {
      display: flex;
      flex-direction: column;
      .vote-error-icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .vote-error-title {
        color: #b52421;
        text-align: center;
        font-size: 28px;
        margin-top: 25px;
        font-weight: 700;
      }
      .vote-error-comment {
        font-size: 24px;
        margin-top: 20px;
        color: #b52421;
        text-align: center;
        padding: 0 50px;
      }
    }
    .vote-close {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .vote-close-title {
        font-size: 30px;
        color: #15181d;
      }
      .vote-close-content {
        font-size: 24px;
        color: #858a99;
        margin-top: 10px;
      }
    }
  }

  .camera-order {
    margin-top: 25px;
    padding: 25px;
    border-radius: 20px;
    display: flex;
    font-size: 24px;
    color: #858a99;
    flex-direction: column;
    background-color: #fff;
    .common {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .camera-order-time {
      margin-top: 20px;
    }
    .camera-order-num {
      margin-top: 20px;
    }
    .camera-order-number {
      .camera-order-number-left {
      }
      .camera-order-number-right {
        display: flex;
        justify-content: center;
        align-items: center;
        .camera-order-number-right-orderNumber {
        }
        .camera-order-number-right-btn {
          // background-color: #eee;
          border: 1px solid #f8f6f7;
          padding: 5px 10px;
          box-sizing: border-box;
          margin-left: 10px;
          border-radius: 10px;
        }
      }
    }
    .camera-order-yuanjia {
      margin-top: 20px;
    }
    .camera-order-zhekoujia {
      margin-top: 20px;
    }
  }
}
// .fooster-btn {
//   position: fixed;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   background-color: #fff;
//   padding: 30px 40px;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   .fooster-btn-left {
//     font-size: 26px;
//   }
//   .fooster-btn-right {
//     .nut-button--default {
//       border: none !important;
//     }
//   }
// }
</style>
